<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>

<div id="app">
    <router-link to="/login?id=123&name=tom">login</router-link>
    <router-link to="/reg">register</router-link>

    <router-view></router-view>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>

    let login  = {
        template: '<h1>login with query [{{$route.query.id}}, {{$route.query.name}}]</h1>',
        created() {
            // $route 对象可以获取传参,可以通过浏览器，console 控制台 输入：vm.$router.$route查看
            console.log(this.$route);
        }
    };

    let reg  = {
        template: '<h2>register</h2>',
    };

    let router = new VueRouter({
        routes: [
            {path: '/login', component: login},
            {path: '/reg', component: reg},
        ]
    });

    let vm = new Vue({
        el: "#app",
        data: {
        },
        router
    })

</script>
</body>
</html>
